Create paper wireframes 建立紙質線框圖

紙質線框圖的概念與優勢 Introduction to Paper Wireframes

1. 什麼是線框圖？What Is a Wireframe?

線框圖是一種數字產品（如APP或網站）的基礎草圖，只包含線條和簡單圖形（如方框、圓形等）。它的目標是：建立頁面的基礎結構，展示每個元素的功能和位置重點是結構和功能，而不是視覺風格（如顏色或字型）。

2. 為什麼用紙來畫線框圖？Why Use Paper for Wireframing?

相比數字工具，紙質線框圖有幾個明顯優勢：

• 速度快：手繪只需幾秒鐘就能勾勒出想法，甚至可以在餐巾紙上快速草圖。

• 成本低：只需要一支筆和一張紙，不需要軟體或裝置。

• 便於發散思維：因為製作成本低，可以嘗試很多想法，不必擔心畫得不完美。

紙質線框圖的重點不是完美，而是儘可能多地表達和記錄你的創意。

3. 從已有產品練習到新產品設計 From Existing Products to New Ideas

之前你練習過給 Google Photos 這類已有的產品畫線框圖，這對新手來說是很好的練習。但在真實工作中,我們常常需要為全新的產品或功能畫線框圖。

舉個例子:假設你要設計一個"遛狗 APP"的首頁。因為這個 APP 還不存在,所以你需要多想幾種可能性,畫出不同的版本,試試看這個首頁可以怎麼設計、放哪些內容。

繪製紙質線框圖的步驟 Steps to Create Paper Wireframes

Step 1：列出頁面需要包含的資訊 List the Required Information

在動筆前，先寫出該頁面必須包含的內容，這樣才能確保每個線框圖都不會遺漏關鍵元素。

以“遛狗APP主頁”為例，可能包括：

• 導航圖示（Navigation Icon）

• 搜尋欄（Search Bar）

• 圖片（Images）

• 文字描述（Text Descriptions）

Step 2：繪製至少5個版本 Draw at Least 5 Different Versions

建議畫至少5個不同結構版本，每個版本探索一種新思路。即使你覺得某個版本很奇怪，也可以大膽嘗試。創新往往來自“不尋常”的想法。

示例中的5個版本說明：

• 選項A：每個遛狗員是一個“卡片”樣式的資料卡，有搜尋欄在頂部。靈感來自超市的宣傳單。

• 選項B：加入“狗狗訓練小貼士”或文章在頁面頂部；把遛狗員的資料換成橫向排布。

• 選項C：增加“使用者最近活動”區域；遛狗員仍是橫向排布，不過這次用分隔線替代卡片框；加上標題“附近的遛狗員”。

• 選項D：採用3大板塊的佈局，分別展示：預約遛狗員、最近活動、最新訓練小貼士。

• 選項E：強調視覺吸引力，加入佔點陣圖（打X的方框代表圖片）；右上角加頭像，方便跳轉到使用者個人頁。

Step 3：挑選並標記你最喜歡的部分 Review and Star the Best Ideas

完成初步繪製後，回顧所有版本，並給你最喜歡的設計元素打星號，例如：

• 大多數版本都有頂部導航欄 → 標記為保留內容

• 喜歡“附近遛狗員列表”這種展示方式 → 也打星號

這些星號能幫助你在下一階段集中精力完善最有潛力的部分。

Step 4：轉向數字線框圖 Move to Digital Wireframes

選出2到3個你最滿意的設計，然後用電腦軟體（比如Figma）把它們畫出來。下一節課會教你怎麼用軟體畫線框圖。

另外，記得配合站點地圖一起用：看看哪些頁面已經畫好了，哪些還沒畫。把工作分成幾個小部分，例如：先畫首頁，然後畫主要頁面，最後畫其他小頁面。

補充建議：儲存線框圖照片 Save Your Paper Wireframes

因為線框圖是設計流程中重要的一部分，建議你為每一份紙質線框圖拍照儲存。這樣，在製作作品集時，你就有豐富的影象素材可選。